<template>
  <div class="login">
    <div class="login-box">
      <div class="title"><h3>欢迎使用管理系统</h3></div>
      <div class="from-box">
        <!-- rules属性绑定表单的验证规则 -->
        <!-- 给表单组件绑定，获取dom -->
        <a-form :model="formState" :rules="rules" ref="formRef">
          <!-- 在框架中每一项要提交的都要包裹a-form-item -->
          <!-- name或prop是使用哪项规则 -->
          <a-form-item name="username">
            <a-input v-model:value="formState.username">
              <!-- 图标 #是控制图标前后 -->
              <template #prefix>
                <!-- 使用需要的图标组件，先导入并且注册 -->
                <user-outlined />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item name="password">
            <!-- 使用图标的输入框要是双标签 -->
            <a-input v-model:value="formState.password">
              <template #prefix>
                <LockOutlined />
              </template>
            </a-input>
          </a-form-item>
          <div class="btn">
            <a-button @click="resetForm">重置</a-button>
            <a-button @click="onSubmit">登录</a-button>
          </div>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, getCurrentInstance } from 'vue'
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue';
export default {
  // 注册组件
  components: {
    UserOutlined,
    LockOutlined
  },
  setup () {
    const formRef = ref()
    // 结构代理，更方便的使用全局属性和方法
    const { proxy } = getCurrentInstance()
    // 获取实例上的全局属性或方法
    // const internalInstance = getCurrentInstance()
    // console.log(internalInstance.appContext.config.globalProperties);
    // 声明表单的数据
    const formState = reactive({
      username: '',
      password: ''
    })
    // 定义表单验证规则
    const rules = {
      username: [
        // required是否必填，message提示信息
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min: 4, max: 12, message: '请输入4-12个字符', trigger: 'blur' }
      ],
      password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 16, message: '请输入6-16个字符', trigger: 'blur' }
      ]
    }
    // 点击按钮触发拿到的dom元素上的方法
    const resetForm = () => {
      formRef.value.resetFields()
    };
    // 点击登录
    const onSubmit = () => {
      formRef.value
        // validate()触发表单验证（验证规则）
        .validate()
        .then(async val => {
          // 验证成功执行then，发送axios
          const res = await proxy.$http.post('login', val)
          // 判断状态码，使用提示框message(要导入)
          if (res.meta.status != 200) return message.error(res.meta.msg)
          message.success('登录成功')
          // 保存token到本地sessionStorage(关闭页面)或localStorage(永久)
          window.sessionStorage.token = res.data.token
          window.sessionStorage.username = res.data.username
          // 使用代理上的路由跳转
          proxy.$router.push('/home')
        })
    };
    return {
      formState,
      rules,
      formRef,
      resetForm,
      onSubmit
    }
  }
}
</script>

<style lang="less" scoped>
.login {
  height: 100vh;
  background-image: url(../assets/img/login_bg2.jpg);
  background-size: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .login-box {
    width: 500px;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    padding: 10px;
    .from-box {
      margin-top: 60px;
      .btn button {
        float: right;
      }
      .btn button:first-child {
        margin-left: 30px;
      }
    }
    .title {
      text-align: center;
      border: 2px solid #000;
      border-radius: 20px;
      width: 60%;
      margin: -30px auto 0 auto;
      background-color: #888;
      h3 {
        margin-bottom: 0;
        line-height: 40px;
        color: #fff;
      }
    }
  }
}
</style>